<template>
	<view class="new-item-layout">
		<view class="image-content">
			<image :src="newInfo.picurl" mode="aspectFill"></image>
		</view>
		<view class="new-info">

			<text class="title">{{ newInfo.title }}</text>
			<view class="read-info">
				<view class="user-name">{{ newInfo.author }}</view>
				<view class="count">{{ newInfo.hits }}浏览</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		newInfo: {
			type: Object,
			default: () => {}
		}
	})
</script>

<style lang="scss">
	.new-item-layout {
		width: 100%;
		height: 180rpx;
		display: flex;
		padding: 20rpx 0;
		justify-content: space-around;
		align-items: center;
		border-bottom: 1px solid #eee;

		.image-content {
			height: 100%;
			width: 240rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.new-info {
			width: 400rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				width: 100%;
				font-size: 35rpx;
				display: -webkit-box;
				line-clamp: 2;
				box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				max-height: 3.0em;
				/* 设置为行高的两倍 */
				line-height: 1.5em;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.read-info {
				display: flex;
				color: #999;
				font-size: 28rpx;

				.count {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>